import React, { useEffect, useRef, useState } from 'react'
import Head from 'next/head'
import styles from '../styles/index.module.css'
import {
  useDisclosure,
  Button,
  Popover,
  PopoverTrigger,
  Portal,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  ListItem,
  List,
} from "@chakra-ui/react"
import CreateUpdate from '../components/createUpdate'
import Link from 'next/link'

export default function Home(props) {
  const initRef = React.useRef()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [ initialState, setInitialState] = useState({
    title: '添加快捷方式',
    detail: null
  })

  const [ listSite, setListSite ] = useState([])

  useEffect(() => {
    setListSite(props.list || [])
  }, [])

  const onDelete = (detail, onClose) => {
    setListSite(listSite.filter(item => item.id !== detail.id))
    onClose()
  }

  const onSubmitState = ({
    id,
    webName,
    webSite,
  }) => {
    const exist = id ? listSite.find(item => item.id === id) : null;
    if (exist) {
      exist.title = webName
      exist.link = webSite
      setListSite(listSite)
    } else {
      const target = [...listSite, {
        title: webName,
        icon: '/lagou.png',
        link: webSite,
        id: new Date().getTime().toString()
      }]
      setListSite(target)
    }
    onClose()
  }

  const onOpenToggle = (title, detail, onOpen) => {
    setInitialState({
      title,
      detail
    })
    onOpen()
  }

  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className={styles.container}>
          <div className={styles.logoWrapper}>
            <img src="/google_logo.svg" alt=""/>
          </div>
          <div className={styles.inputWrapper}>
            <div className={styles.searchButton}></div>
            <input className={styles.mainInput} placeholder="在 Google 上搜索，或者输入一个网址"></input>
            <div className={styles.voiceSearchButton}></div>
          </div>
          <div className={styles.listContainer}>
            {
              listSite.map(item => (
                <div className={styles.svgLinkTitle} key={item.id}>
                  <Popover placement="bottom">
                    {({ isOpen, onClose }) => (
                      <>
                        <PopoverTrigger>
                          <div className={styles.maskedImage}>
                            <div className={styles.moreCoder}></div>
                          </div>
                        </PopoverTrigger>
                        <PopoverContent>
                          <PopoverBody>
                            <List spacing={3} fontSize="13px">
                              <ListItem  onClick={() => onOpenToggle('修改快捷方式', item,  onOpen)}>
                                修改快捷方式
                              </ListItem>
                              <ListItem onClick={() => onDelete(item, onClose)}>
                                删除
                              </ListItem>
                            </List>
                          </PopoverBody>
                        </PopoverContent>
                      </>
                    )}
                  </Popover>
                  <Link href={item.link}>
                    <a title={item.title} target="_blank">
                      <div className={styles.titleIcon}>
                        <img className={styles.logoSite} src={item.icon} alt=""/>
                    </div>
                    </a>
                  </Link>
                  <Link href={item.link}>
                    <a title={item.title} target="_blank">
                      <div className={styles.titleLtrDesc}>
                        <span className={styles.titleDesc}>{item.title}</span>
                      </div>
                    </a>
                  </Link>
                </div>
              ))
            }
            {
              listSite.length < 8 && (
                <div className={styles.svgLinkTitle} onClick={() => onOpenToggle('添加快捷方式', null, onOpen)}>
                  <div className={styles.titleIcon}>
                    <img src="/add.svg" alt=""/>
                  </div>
                  <div className={styles.titleLtrDesc}>
                    <span className={styles.titleDesc}>添加快捷方式</span>
                  </div>
                </div>
              )
            }
          </div>
          <CreateUpdate isOpen={isOpen} onClose={onClose} initialState={initialState} onSubmitState={onSubmitState}></CreateUpdate>
        </div>
      </main>
    </div>
  )
}

export async function getStaticProps () {
  return {
    props: { list: [
      {
        title: 'chakra-ui.com',
        icon: '/lagou.png',
        link: 'https://chakra-ui.com/docs/overlay/popover',
        id: new Date().getTime().toString()
      }
    ] }
  }
}
